<template>
  <div class="col-md-3 nav nav-tabs ">
    <ul class="tab-bar" @click.stop="show">
      <li class="tab-bar-item active" data-id="message"><a href="#" data-toggle="tab" >消息设置</a></li>
      <li class="tab-bar-item" data-id="todo"><a href="#" data-toggle="tab">待办设置</a></li>
      <li class="tab-bar-item" data-id="customMenuSetting"><a href="#" data-toggle="tab">常用菜单设置</a></li>
      <li class="tab-bar-item" data-id="hotKeySetting"><a href="#" data-toggle="tab">快捷键设置</a></li>
    </ul>
  </div>
</template>

<script>
  import {getFarther} from '../../utils/utils'
    export default {
      name: "system-tabs",
      methods:{
        show(e){
          let doms = document.querySelectorAll('.tab-bar-item');
          for(let i = 0;i < doms.length;++i){
            doms[i].classList.remove('active');
          }
          let currentDom = getFarther('tab-bar-item',e.target);
          currentDom.classList.add('active');
          let domArr = document.querySelectorAll('#sys-set-win .tab-body li');
          for(let i = 0;i < domArr.length;++i){
            domArr[i].classList.remove('active')
          }
          document.getElementById(currentDom.dataset.id).classList.add('active');
        }
      }
    }
</script>

<style scoped>

</style>
